<template>
<div>
    <div class="user_info">
        <div class="name fs40 fw-bold">{{userInfo.userName}}</div>
        <div class="vip mar-t20 flex-v-center">
            <i v-if="userInfo.vip == '01'" class="color-red fs34 fw-bold mar-r10 icon-vip"></i>
            <span class="fs28">{{userInfo.vip == '01' ? 'VIP会员' : '普通会员'}}</span>
        </div>
        <div class="edit flex-v-center" @click="$navigate.to('/pages/user/editBusinessCard')">
            <span class="color-999 mar-r10">修改名片</span>
            <i class="icon-arrow-right fs22 color-999"></i>
        </div>
    </div>
    <div class="collection">
        <div class="collection-item" @click="$navigate.to('/pages/user/myShare')">
            <h3>{{cntTotal.shareCriCnt + cntTotal.shareFriendCnt}}</h3>
            <p>分享</p>
        </div>
        <div class="collection-item-line"></div>
        <div class="collection-item" @click="$navigate.to('/pages/user/myLike')">
            <h3>{{cntTotal.zanCnt || 0}}</h3>
            <p>赞过</p>
        </div>
        <div class="collection-item-line"></div>
        <div class="collection-item" @click="$navigate.to('/pages/user/mySee')">
            <h3>{{cntTotal.viewCnt || 0}}</h3>
            <p>看过</p>
        </div>
        <div class="material-btn" @click="$navigate.to('/pages/user/myMaterial')">
            <image src="/static/images/userMaterial.webp" alt="">
            <p>我的素材</p>
        </div>
    </div>
    <div class="my_vip flex" @click="$navigate.toVip()">
        <image class="vip_bg" src="/static/images/OpeningMemberBacThree.webp" mode="" />
        <div class="flex-1">
            <image class="vip_word" src="/static/images/user-new-vipFour.webp" mode="" />
            <p v-if="userInfo.vip == '01'">会员有效期：{{userInfo.vipEndTime}}</p>
            <p v-else>享受会员专属特权</p>
        </div>
        <div class="btn">{{userInfo.vip == '01' ? '立即续费' : '立即开通'}}</div>
    </div>
    <div class="cell box">
        <div class="cell-item" @click="$navigate.to('/pages/invitation/index')">
            <div class="icon"> <image src="/static/images/userIcon/icon-02.png" mode="" /> </div>
            <p>邀请奖励</p>
            <em class="fs40 fw-bold color-red mar-r10">·</em>
            <span>前往提现</span>
            <i class="icon-arrow-right"></i>
        </div>
    </div>
    <div class="cell box">
        <div class="cell-item" @click="$navigate.to('/pages/advert/index')">
            <div class="icon"> <image src="/static/images/userIcon/icon-03.png" mode="" /> </div>
            <p>我的广告</p>
            <span>推广引流</span>
            <i class="icon-arrow-right"></i>
        </div>
    </div>
    <div class="cell box">
        <div class="cell-item" @click="$navigate.to('/pages/team/index')">
            <div class="icon"> <image src="/static/images/userIcon/icon-06.png" mode="" /> </div>
            <p>我的团队</p>
            <span v-if="userInfo.teamId">{{ userInfo.teamName }}</span>
            <span v-else>您还没有团队，去创建一个团队</span>
            <em class="point" v-if="applyCnt">{{applyCnt}}</em>
            <i class="icon-arrow-right"></i>
        </div>
    </div>
    <div class="cell box">
        <div class="cell-item" @click="$navigate.to('/pages/admin/house/index')">
            <div class="icon"> <image src="/static/images/userIcon/icon-04.png" mode="" /> </div>
            <p>店推宝</p>
            <span></span>
            <i class="icon-arrow-right"></i>
        </div>
    </div>
    <div class="cell box" v-if="$store.getters.isSuperManger" >
        <div class="cell-item" @click="$navigate.to('/pages/admin/respect/upload')">
            <div class="icon"> <image src="/static/images/userIcon/icon-04.png" mode="" /> </div>
            <p>问候素材维护</p>
            <span></span>
            <i class="icon-arrow-right"></i>
        </div>
        <div
            class="cell-item" 
            @click="$navigate.to('/pages/admin/gzh/menu')">
            <div class="icon"> <image src="/static/images/userIcon/icon-04.png" mode="" /> </div>
            <p>公众号菜单设置</p>
            <span></span>
            <i class="icon-arrow-right"></i>
        </div>
        <div
            class="cell-item" 
            @click="$navigate.to('/pages/map/edit')">
            <div class="icon"> <image src="/static/images/userIcon/icon-04.png" mode="" /> </div>
            <p>地图数据设置</p>
            <span></span>
            <i class="icon-arrow-right"></i>
        </div>
    </div>
    <!-- <div class="cell box">
        <div class="cell-item" @click="$navigate.to('/pages/user/setting')">
            <div class="icon"> <image src="/static/images/userIcon/icon-03.png" mode="" /> </div>
            <p>设置</p>
            <span>内容推送设置</span>
            <i class="icon-arrow-right"></i>
        </div>
        <div class="cell-item">
            <div class="icon"> <image src="/static/images/userIcon/icon-04.png" mode="" /> </div>
            <p>邀请名片按钮</p>
            <switch checked="false" color="@mainColor" />
        </div>
    </div> -->
</div>
</template>

<script>
import { mapState } from 'vuex';
import { getViewerDynamicTotal } from '@/request/user'
import { getTeamInfo } from '@/request/team'
export default {
    data() {
        return {
            cntTotal: {
                zanCnt: 0,
                viewCnt: 0,
                shareCriCnt: 0,
                shareFriendCnt: 0,
            },
            applyCnt: 0
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        }),
        isManger() {

        },
    },
    onLoad() {

    },
    onShow() {  
        this.$refreshUserInfo()
        this.getTotal()
        this.getTeamApplyCut()
    },
    methods: {
        getTotal() {
            getViewerDynamicTotal().then(res => {
                this.cntTotal.viewCnt = res.data.viewCnt || 0
                this.cntTotal.zanCnt = res.data.zanCnt || 0
                this.cntTotal.shareCriCnt = res.data.shareCriCnt || 0
                this.cntTotal.shareFriendCnt = res.data.shareFriendCnt || 0
            })
        },
        getTeamApplyCut() {
            if(this.userInfo.teamId) {
                getTeamInfo({
                    teamId: this.userInfo.teamId
                }).then(res => {
                    this.applyCnt = res.data.applyCnt
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.user_info {
    width: 100%;
    height: 180rpx;
    padding: 30rpx 50rpx 0;
    position: relative;

    .edit {
        position: absolute;
        right: 30rpx;
        top: 50%;
        margin-top: -20rpx;
    }
}

.collection{
    display: flex;
    align-items: center;
    .collection-item{
        flex: 1;
        height: 120rpx;
        .align(center, column);
        p{
            font-size: 24rpx;
            color: #999;
        }
        h3 {
            font-size: 40rpx;
            font-weight: bold;
        }
    }
    .collection-item-line{
        width: 1px;
        height: 40rpx;
        background: #ddd;
    }
    
    .material-btn{
        width: 250rpx;
        height: 80rpx;
        background: #fff;
        .align(center);
        border-radius: 40rpx 0 0 40rpx;
        font-size: 32rpx;
        font-weight: bold;
        image{
            width: 48rpx;
            height: 48rpx;
        }
    }
}
.my_vip{
    width: 690rpx;
    height: 128rpx;
    margin: 20rpx auto 30rpx;
    position: relative;
    padding: 20rpx 30rpx;
    *{
        position: relative;
        z-index: 10;
    }
    .vip_bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .vip_word{
        width: 100rpx;
        height: 32rpx;
        margin-top: 10rpx;
    }
    p{
        font-size: 28rpx;
        color: #f8dab9;
        margin-top: 10rpx;
    }
    .btn{
        width: 144rpx;
        height: 52rpx;
        position: absolute;
        right: 20rpx;
        top: 50%;
        margin-top: -25rpx;
        border-radius: 26rpx;
        .gradient(#f8ecd3,#ebccb4, to right);
        .align(center);
        font-size: 26rpx;
        font-weight: 700;
    }
}

.box{
    width: 690rpx;
    background: #fff;
    border-radius: 15rpx;
    margin: 0 auto 30rpx;
    padding: 0 30rpx;
}
.cell{    
    .cell-item{
        width: 100%;
        height: 110rpx;
        border-bottom: 1rpx solid #eee;
        .align(v-center);
        &:last-child{
            border-bottom: 0;
        }
        .icon{
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        p{
            flex: 1;
            color: #000;
        }
        span{
            margin-right: 20rpx;
            font-size: 26rpx;
            color: #999;
        }
        .icon-arrow-right{
            font-size: 24rpx;
            color: #ccc;
        }
        .point{
            color: #fff;
            padding: 0 10rpx;
            height: 32rpx;
            font-size: 24rpx;
            margin-right: 10rpx;
            border-radius: 18rpx;
            .align(center);
            background: #e02e42;
            z-index: 20;
        }
    }
}
</style>
